<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>offsetHeight</title>
        <style type="text/css">
            .container {
                padding: 10px ;
                border: 2px solid blue ;
                margin: 15px ;
            }
        </style>
    </head>
    <body>

        <div class="container"></div>

        <div class="wrapper">
            <button type="button" onclick="x.height()">获取高度</button>
            <button type="button" onclick="x.add()">添加新元素</button>
        </div>

        <script type="text/javascript">
            let x = Object.create( null );

            x.container = document.querySelector( '.container' );

            x.array = [ '50px' , '100px' , '150px' , '200px' ] ;

            x.add = function(){
                let div = document.createElement( 'div' );
                div.style.height = x.array[ ( Math.random() * x.array.length ) | 0 ] ;
                div.style.border = '1px solid red';
                x.container.appendChild( div );
            }

            x.height = function(){
                let h = x.container.offsetHeight ;
                console.log( h );
                alert( h );
            }
        </script>
        
    </body>
</html>